import React, { useState, useEffect } from 'react';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { usePage } from '../hooks/page';
import clsx from 'clsx';
import HeaderImage from '@/component/HeaderImage';
import { Container, Card, CardHeader, CardContent } from '@material-ui/core';
import OpeningSoon from '@/component/OpeningSoon';
import Footer from '@/component/Footer';

const useStyles = makeStyles({
  root: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
  },
  container: {
    position: 'relative',
    marginTop: '-20px',
    minHeight: 'auto',
    flex: 1,
  },
});

export default () => {
  usePage({
    appBarTitleText: '动态',
    appBarStyle: 'none',
  });

  const classes = useStyles();

  return (
    <div className={classes.root}>
      <HeaderImage
        cover="//oss.10miaomiao.cn/images/bg4.png"
        title="我的小动态"
      />
      <Container className={classes.container}>
        <Card>
          {/* <CardHeader
            title="我的小动态"
          /> */}
          <CardContent>
            <OpeningSoon></OpeningSoon>
          </CardContent>
        </Card>
      </Container>
      <Footer />
    </div>
  );
};
